<template>
<div class="example">
    <div class="swiper" :style="{'height':height}" v-swiper:myDirectiveSwiper="swiperOptions" @ready="onSwiperRedied" @click-slide="onSwiperClickSlide" @slide-change-transition-start="onSwiperSlideChangeTransitionStart">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in swiperList" :key="item.imgUrl">
                <img :src="item.imgUrl" alt="">
            </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
    </div>
</div>
</template>

<script>
export default {
    name: 'swiper-nuxt',
    props: {
        height: {
            type: [Number, String],
            default: '300px'
        }
    },
    data() {
        return {
            swiperList: [{
                imgUrl: require('~/assets/images/swiper/b1.jpg')
            }, {
                imgUrl: require('~/assets/images/swiper/b2.jpg')
            }, {
                imgUrl: require('~/assets/images/swiper/b3.jpg')
            }],
            swiperOptions: {
                loop: true,
                autoplay: true,
                slidesPerView: 1,
                centeredSlides: false,
                spaceBetween: 0,
                pagination: {
                    el: '.swiper-pagination'
                }
            }
        }
    },

    methods: {
        onSwiperRedied(swiper) {
            console.log('Swiper redied!', swiper)
        },
        onSwiperSlideChangeTransitionStart() {
            console.log('SwiperSlideChangeTransitionStart!')
        },
        onSwiperClickSlide(index, reallyIndex) {
            console.log('Swiper click slide!', reallyIndex)
        }
    }
}
</script>

<style lang="scss" scoped>
.example {
    height: auto;

    .swiper {
        height: 300px;
        width: 100%;

        .swiper-slide {
            text-align: center;
            font-size: 38px;
            font-weight: 700;
            background-color: #eee;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 100%;
            }
        }

        /deep/ .swiper-pagination {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 3.5%;
            z-index: 222;
        }

        /deep/ .swiper-pagination-bullet {
            background: #e3e3e3;
            color: #e3e3e3;
            opacity: 1;
            margin: 0 5px;
            width: 40px;
            height: 6px;
            display: inline-block;
        }

        /deep/ .swiper-pagination-bullet-active {
            opacity: 1;

            background: #fff;
        }

    }
}
</style>
